import React, { Component } from 'react'
import { Carousel } from 'antd-mobile'

export default class Calendar extends Component {
  render() {
    return (
      <Carousel className={`cm-calendar-container`}>
        {this.renderCalendar()}
        {this.renderCalendar()}
        {this.renderCalendar()}
      </Carousel>
    )
  }
  renderCalendar() {
    return (
      <div className={`cm-calendar-box`}>
        <span>9月</span>

        <div className={`cm-a-week`}>
          <span>日</span>
          <span>一</span>
          <span>二</span>
          <span className={`cm-active-text`}>今天</span>
          <span>四</span>
          <span>五</span>
          <span>六</span>
        </div>

        <div className={`cm-date`}>
          <span>18</span>
          <span>19</span>
          <span>20</span>
          <span>
            <span className={`cm-active-date`}>21</span>
          </span>
          <span>22</span>
          <span>23</span>
          <span>24</span>
        </div>
      </div>
    )
  }
}